<template>
	<div class="header">
		<div class="logo hidden-xs-only">自由的个人博客</div>
		<div class="header-left hidden-xs-only">
			<el-menu class="sidebar-el-menu" mode="horizontal" background-color="#242f42" text-color="#bfcbd9" type="flex"
			 active-text-color="#20a0ff" unique-opened router>
				<template v-for="item in items">
					<template v-if="item.subs">
						<el-submenu :index="item.index" :key="item.index">
							<template slot="title">
								<i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
							</template>
							<template v-for="subItem in item.subs">
								<el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
									<template slot="title">{{ subItem.title }}</template>
									<el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">
										{{ threeItem.title }}
									</el-menu-item>
								</el-submenu>
								<el-menu-item v-else :index="subItem.index" :key="subItem.index">
									{{ subItem.title }}
								</el-menu-item>
							</template>
						</el-submenu>
					</template>
					<template v-else>
						<el-menu-item :index="item.index" :key="item.index">
							<i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
						</el-menu-item>
					</template>
				</template>
			</el-menu>
		</div>
		<div class="logo  hidden-sm-and-up" style="width: 100%;">自由的个人博客</div>
		<div class="header-left hidden-sm-and-up" style="width: 100%;">
			<el-menu class="sidebar-el-menu" mode="vertical" background-color="#242f42" text-color="#bfcbd9" type="flex"
			 active-text-color="#20a0ff" unique-opened router>
				<template v-for="item in items">
					<template v-if="item.subs">
						<el-submenu :index="item.index" :key="item.index">
							<template slot="title">
								<i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
							</template>
							<template v-for="subItem in item.subs">
								<el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
									<template slot="title">{{ subItem.title }}</template>
									<el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">
										{{ threeItem.title }}
									</el-menu-item>
								</el-submenu>
								<el-menu-item v-else :index="subItem.index" :key="subItem.index">
									{{ subItem.title }}
								</el-menu-item>
							</template>
						</el-submenu>
					</template>
					<template v-else>
						<el-menu-item :index="item.index" :key="item.index">
							<i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
						</el-menu-item>
					</template>
				</template>
			</el-menu>
		</div>
		<div class="header-right hidden-xs-only">
			<div class="header-user-con">
				<!-- 全屏显示 -->
				<div class="btn-fullscreen" @click="handleFullScreen">
					<el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
						<i class="el-icon-rank"></i>
					</el-tooltip>
				</div>
				<!-- 消息中心 -->
				<div class="btn-bell">
					<span class="writeArticleSpan" v-if="userInfo&&userInfo.user_type!=3" @click="writeArticles()">写文章</span>
				</div>
				<!-- 用户头像 -->
				<div class="user-avator" v-if="userInfo"><img src="../../assets/img/img.jpg"></div>
				<!-- 用户名下拉菜单 -->
				<el-dropdown class="user-name" trigger="click" @command="handleCommand">
					<span class="el-dropdown-link">
						{{userName}} <i class="el-icon-caret-bottom"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<router-link to="About" target="_blank">
							<el-dropdown-item>关于作者</el-dropdown-item>
						</router-link>
						<a href="https://github.com/luoyekongcheng/freeblog" target="_blank">
							<el-dropdown-item>项目仓库</el-dropdown-item>
						</a>
						<el-dropdown-item divided command="login" v-if="!userInfo_string">登录</el-dropdown-item>
						<el-dropdown-item divided command="loginout" v-if="userInfo_string">注销</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		constHelp
	} from '../common/contant';
	import common from '../common/common.js'
	import bus from '../common/bus';
	export default {
		data() {
			return {
				collapse: false,
				fullscreen: false,
				user_name: '未登录',
				message: 2,
				userInfo: {},
				userInfo_string: "",
				items: [
					// {
					// 	icon: 'el-icon-lx-home',
					// 	index: 'myfrontIndex',
					// 	title: '首页'
					// },
					// {
					// 	icon: 'el-icon-lx-read',
					// 	index: 'special_column',
					// 	title: '专栏'
					// },
					// {
					// 	icon: 'el-icon-menu',
					// 	index: 'Classification',
					// 	title: '专题'
					// },
					// {
					// 	icon: 'el-icon-date',
					// 	index: 'Archive',
					// 	title: '归档'
					// },
					// {
					// 	icon: 'el-icon-picture',
					// 	index: 'Photo',
					// 	title: '图片'
					// },
					{
						icon: 'el-icon-tickets',
						index: 'Learn',
						title: 'IT技术学习'
					},
					{
						icon: 'el-icon-goods',
						index: 'ToolsIndex',
						title: '站长工具'
					},
					{
						icon: 'el-icon-lx-people',
						index: 'About',
						title: '关于'
					}
				],
			}
		},
		computed: {
			userName() {
				let item = localStorage.getItem("UserInfo");
				let username = !common.IsNull(item) ? JSON.parse(item).user_name : this.user_name;
				return !common.IsNull(item) ? JSON.parse(item).user_name : this.user_name;
			}
		},
		created: function() {
			this.userInfo_string = localStorage.getItem("UserInfo");
			if (!common.IsNull(this.userInfo_string)) {
				this.userInfo = JSON.parse(this.userInfo_string);
			}
		},
		methods: {
			// 用户名下拉菜单选择事件
			handleCommand(command) {
				if (command == 'login') {
					localStorage.removeItem('UserInfo')
					this.$router.push('/login');
				}
				if (command == 'loginout') {
					localStorage.removeItem('UserInfo')
					this.$router.push('/login');
				}
			},
			// 跳转到文章编写后台界面
			writeArticles() {
				this.$router.push('/WriteArticles');
			},
			// 侧边栏折叠
			collapseChage() {
				this.collapse = !this.collapse;
				bus.$emit('collapse', this.collapse);
			},
			// 全屏事件
			handleFullScreen() {
				let element = document.documentElement;
				if (this.fullscreen) {
					if (document.exitFullscreen) {
						document.exitFullscreen();
					} else if (document.webkitCancelFullScreen) {
						document.webkitCancelFullScreen();
					} else if (document.mozCancelFullScreen) {
						document.mozCancelFullScreen();
					} else if (document.msExitFullscreen) {
						document.msExitFullscreen();
					}
				} else {
					if (element.requestFullscreen) {
						element.requestFullscreen();
					} else if (element.webkitRequestFullScreen) {
						element.webkitRequestFullScreen();
					} else if (element.mozRequestFullScreen) {
						element.mozRequestFullScreen();
					} else if (element.msRequestFullscreen) {
						// IE11
						element.msRequestFullscreen();
					}
				}
				this.fullscreen = !this.fullscreen;
			}
		},
		mounted() {
			if (document.body.clientWidth < 1500) {
				this.collapseChage();
			}
		}
	}
</script>
<style scoped>
	.el-menu.el-menu--horizontal {
		border-bottom: 0px;
	}

	.header {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 60px;
		font-size: 22px;
		color: #fff;
	}

	.collapse-btn {
		float: left;
		padding: 0 21px;
		cursor: pointer;
		/* line-height: 70px; */
	}

	.header .logo {
		float: left;
		width: 250px;
		line-height: 60px;
		margin-left: 50px;
	}

	.header-left {
		float: left;
		padding-right: 50px;
		/* height: 70px; */
	}

	.header-right {
		float: right;
		padding-right: 50px;
	}

	.header-user-con {
		display: flex;
		height: 60px;
		align-items: center;
	}

	.btn-fullscreen {
		transform: rotate(45deg);
		margin-right: 5px;
		font-size: 24px;
	}

	.btn-fullscreen {
		position: relative;
		width: 30px;
		height: 30px;
		text-align: center;
		border-radius: 15px;
		cursor: pointer;
	}

	.btn-bell-badge {
		position: absolute;
		right: 0;
		top: -2px;
		width: 8px;
		height: 8px;
		border-radius: 4px;
		background: #f56c6c;
		color: #fff;
	}

	.btn-bell .el-icon-bell {
		color: #fff;
	}

	.writeArticleSpan {
		position: relative;
		text-align: center;
		border-radius: 15px;
		cursor: pointer;
		font-size: smaller;
		color: #fff;
		border-radius: 4px;
		top: -2px;

	}

	.user-name {
		margin-left: 10px;
	}

	.user-avator {
		margin-left: 20px;
	}

	.user-avator img {
		display: block;
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.el-dropdown-link {
		color: #fff;
		cursor: pointer;
	}

	.el-dropdown-menu__item {
		text-align: center;
	}
</style>
